revision:
The property sets or returns the HTML element, including attributes, start tag, and end tag.
Syntax:
element.outerHTML : returns the outerHTML property: the HTML content of the element, including attributes, start tag and end tag..
element.outerHTML = text : sets the outerHTML property:
property value:
text : the new HTML content.
example
Click "change" to change the first h4 header to a h5.
<div> <p>Click "change" to change the first h4 header to a h5.</p> <button onclick="firstFunction()">Change</button> <h4>The outerHTML Property</h4> </div> <script> function firstFunction() { const element = document.getElementsByTagName("h4")[0]; element.outerHTML = "<h5>You changed me and my content!</h5>"; } </script>
Click "Alert" to alert the outer HTML content of the ul element.
<div> <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> <p>Click "Alert" to alert the outer HTML content of the ul element.</p> <button onclick="secondFunction()">Alert</button> </div> <script> function secondFunction() { let html = document.getElementById("myList").outerHTML; alert(html); } </script>